<template>
  <div class="my_discovery">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" height="150px" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-image src="/src/assets/meirituijian.png" />
        <div>每日推荐</div>
      </van-grid-item>
      <van-grid-item>
        <van-image src="/src/assets/sirenFM.png" />
        <div>私人FM</div>
      </van-grid-item>
      <van-grid-item>
        <van-image src="/src/assets/yinlegedan-.png" />
        <div>歌单</div>
      </van-grid-item>
      <van-grid-item>
        <van-image src="/src/assets/paihangbang.png" />
        <div>排行榜</div>
      </van-grid-item>
    </van-grid>
    <!-- 发现好歌单 -->
    <div class="recommend">
      <h4>发现好歌单</h4>
      <van-button color="#c3c3c3" size="small" round plain>
        <span>查看更多</span>
      </van-button>
    </div>
    <!-- 歌单列表 -->
    <div class="music_card">
      <van-row :gutter="[20, 20]">
        <van-col span="12">
          <img
            src="https://p2.music.126.net/t97_FTCUQsFJrh-gSE33_g==/109951167665585892.jpg?param=320y320"
            alt=""
          />
        </van-col>
        <van-col span="12">
          <img
            src="https://p2.music.126.net/REVTal0DkSmickkWrbQ4zQ==/109951169402079631.jpg?param=320y320"
            alt=""
          />
        </van-col>
        <van-col span="12">
          <img
            src="https://p2.music.126.net/REVTal0DkSmickkWrbQ4zQ==/109951169402079631.jpg?param=320y320"
            alt=""
          />
        </van-col>
        <van-col span="12">
          <img
            src="https://p2.music.126.net/zAuVCW-cUvn29s9IxuQh-w==/109951167071306612.jpg?param=320y320"
            alt=""
          />
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script setup>
const images = [
  "https://tse3-mm.cn.bing.net/th/id/OIP-C.Tq82kGnNHigGZ0jjctQQjAHaDL?rs=1&pid=ImgDetMain",
  "https://img.zcool.cn/community/01444259f1999ea801202b0c434831.jpg@1280w_1l_2o_100sh.jpg",
];
</script>
<style scoped>
.my_discovery {
  padding: 0 10px;
}
.recommend {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recommend span {
  color: #000;
}
.music_card {
  overflow: hidden;
  margin-top: 10px;
}
img {
  width: 100%;
  height: 200px;
}
</style>